<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":-1,"unescape":false,"preload":true},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"./public/search.xml"};
  </script>

  <meta name="description" content="JavaScript背景Web前端有三层：  HTML：从语义的角度，描述页面结构  CSS：从审美的角度，描述样式（美化页面）  JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制）">
<meta property="og:type" content="article">
<meta property="og:title" content="01-JS简介">
<meta property="og:url" content="http://yoursite.com/2020/07/07/01-JS%E7%AE%80%E4%BB%8B/index.html">
<meta property="og:site_name" content="GipBaby270&#39;s Blog">
<meta property="og:description" content="JavaScript背景Web前端有三层：  HTML：从语义的角度，描述页面结构  CSS：从审美的角度，描述样式（美化页面）  JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制）">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://img.smyhvae.com/20180116_1735.gif">
<meta property="og:image" content="http://img.smyhvae.com/20180116_1906.png">
<meta property="og:image" content="http://img.smyhvae.com/20180116_2008.gif">
<meta property="og:image" content="http://img.smyhvae.com/20180116_2010.png">
<meta property="og:image" content="http://img.smyhvae.com/20180116_2230.gif">
<meta property="article:published_time" content="2020-07-07T11:10:04.565Z">
<meta property="article:modified_time" content="2020-07-07T11:17:57.498Z">
<meta property="article:author" content="Gip886">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://img.smyhvae.com/20180116_1735.gif">

<link rel="canonical" href="http://yoursite.com/2020/07/07/01-JS%E7%AE%80%E4%BB%8B/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>01-JS简介 | GipBaby270's Blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    
    <a href="https://github.com/Gip886" target="_blank" rel="noopener" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">GipBaby270's Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Fighting for BAT!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/07/07/01-JS%E7%AE%80%E4%BB%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/%E5%A4%B4%E5%83%8F.jpg">
      <meta itemprop="name" content="Gip886">
      <meta itemprop="description" content="为了更美好的明天而战">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="GipBaby270's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          01-JS简介
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-07-07 19:10:04 / 修改时间：19:17:57" itemprop="dateCreated datePublished" datetime="2020-07-07T19:10:04+08:00">2020-07-07</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/JS%E5%9F%BA%E7%A1%80/" itemprop="url" rel="index"><span itemprop="name">JS基础</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>6.9k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>6 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="JavaScript背景"><a href="#JavaScript背景" class="headerlink" title="JavaScript背景"></a>JavaScript背景</h2><p>Web前端有三层：</p>
<ul>
<li><p>HTML：从语义的角度，描述页面<strong>结构</strong></p>
</li>
<li><p>CSS：从审美的角度，描述<strong>样式</strong>（美化页面）</p>
</li>
<li><p>JavaScript：从交互的角度，描述<strong>行为</strong>（实现业务逻辑和页面控制）</p>
<a id="more"></a>

</li>
</ul>
<h3 id="发展历史"><a href="#发展历史" class="headerlink" title="发展历史"></a>发展历史</h3><p>JavaScript诞生于<strong>1995年</strong>。布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，开发除了JavaScript语言。</p>
<p>JavaScript是由<strong>网景</strong>公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，因市场宣传需要，改名为 JavaScript。</p>
<p>后来 Sun 公司 被Oracle收购，JavaScript版权归Oracle所有。</p>
<blockquote>
<p>备注：由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。</p>
</blockquote>
<blockquote>
<p>同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。</p>
</blockquote>
<p>1996年，微软为了抢占市场，推出了<code>JScript</code>在IE3.0中使用。</p>
<p>1996年11月网景公司将JS提交给ECMA(国际标准化组织)成为国际标准，用于对抗微软。</p>
<p>JavaScript是世界上用的最多的<strong>脚本语言</strong>。</p>
<h3 id="JavaScript的发展：蒸蒸日上"><a href="#JavaScript的发展：蒸蒸日上" class="headerlink" title="JavaScript的发展：蒸蒸日上"></a>JavaScript的发展：蒸蒸日上</h3><p>2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以很多浏览器就推出了屏蔽广告功能。</p>
<p>2004年，JavaScript命运开始改变。那一年，<strong>谷歌公司开始带头使用Ajax技术</strong>，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如，当我们在百度搜索框搜文字时，输入框下方的智能提示，可以通过Ajax实现。比如，当我们注册网易邮箱时，能够及时发现用户名是否被占用，而不用调到另外一个页面。</p>
<p>2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。<br><strong>JavaScript在移动页面中，也是不可或缺的</strong>。并且这一年，互联网开始标准化，按照W3C规则三层分离，JavaScript越来越被重视。</p>
<p>2010年，人们更加了解<strong>HTML5技术</strong>，<strong>HTML5推出了一个东西叫做Canvas</strong>（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。</p>
<p>2011年，<strong>Node.js诞生</strong>，使JavaScript能够开发服务器程序了。</p>
<p>如今，<strong>WebApp</strong>已经非常流行，就是用<strong>网页技术开发手机应用</strong>。手机系统有iOS、安卓。比如公司要开发一个“携程网”App，就需要招聘三队人马，比如iOS工程师10人，安卓工程师10人，前端工程师10人。共30人，开发成本大；而且如果要改版，要改3个版本。现在，假设公司都用web技术，用html+css+javascript技术就可以开发App。也易于迭代（网页一改变，所有的终端都变了）。</p>
<p>虽然目前WebApp（Web应用）在功能和性能上的体验远不如Native App（原生应用），但是“在原生App中内嵌一部分H5页面”已经是一种趋势。</p>
<h2 id="JavaScript介绍"><a href="#JavaScript介绍" class="headerlink" title="JavaScript介绍"></a>JavaScript介绍</h2><h3 id="JavaScript入门易学性"><a href="#JavaScript入门易学性" class="headerlink" title="JavaScript入门易学性"></a>JavaScript入门易学性</h3><ul>
<li><p>JavaScript对初学者比较友好、简单易用。可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。</p>
</li>
<li><p>JavaScript是有界面效果的（相比之下，C语言只有白底黑字）。</p>
</li>
<li><p>JavaScript是<strong>弱变量类型</strong>的语言，变量只需要用 var/let/const 来声明。而Java中变量的声明，要根据变量的类型来定义。</p>
</li>
</ul>
<p>比如Java中需要定义如下变量：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">int</span> a;</span><br><span class="line"><span class="keyword">float</span> a;</span><br><span class="line"><span class="keyword">double</span> a;</span><br><span class="line">String a;</span><br><span class="line"><span class="keyword">boolean</span> a;</span><br></pre></td></tr></table></figure>

<p>而JavaScript中，只需要用一种方式来定义：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ES5 写法</span></span><br><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ES6 写法</span></span><br><span class="line"><span class="keyword">const</span> a;</span><br><span class="line"><span class="keyword">let</span> a;</span><br></pre></td></tr></table></figure>

<h3 id="JavaScript是前端语言"><a href="#JavaScript是前端语言" class="headerlink" title="JavaScript是前端语言"></a>JavaScript是前端语言</h3><p>JavaScript是前端语言，而不是后台语言。</p>
<p>JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称之为“<strong>前端语言</strong>”。就是服务于页面的交互效果、美化，不能操作数据库。</p>
<p><strong>后台语言</strong>是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。</p>
<p>备注：Node.js是用 JavaScript 开发的，现在也可以基于 Node.js 技术进行服务器端编程。</p>
<h3 id="JavaScript的组成"><a href="#JavaScript的组成" class="headerlink" title="JavaScript的组成"></a>JavaScript的组成</h3><p>JavaScript基础分为三个部分：</p>
<ul>
<li><p><strong>ECMAScript</strong>：JavaScript 的<strong>语法标准</strong>。包括变量、表达式、运算符、函数、if语句、for语句等。</p>
</li>
<li><p><strong>DOM</strong>：Document Object Model（文档对象模型），操作<strong>页面上的元素</strong>的API。比如让盒子移动、变色、改变大小、轮播图等等。</p>
</li>
<li><p><strong>BOM</strong>：Browser Object Model（浏览器对象模型），操作<strong>浏览器部分功能</strong>的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。</p>
</li>
</ul>
<p>通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。</p>
<h2 id="JavaScript-的特点"><a href="#JavaScript-的特点" class="headerlink" title="JavaScript 的特点"></a>JavaScript 的特点</h2><h3 id="特点1：解释型语言"><a href="#特点1：解释型语言" class="headerlink" title="特点1：解释型语言"></a>特点1：解释型语言</h3><p>JavaScript 是解释型语言，不需要事先被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。</p>
<p>什么是「解释型语言」？详见下一段。</p>
<blockquote>
<p>由于少了实现编译这一步骤，所以解释型语言开发起来尤为方便，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。</p>
</blockquote>
<h3 id="特点2：单线程"><a href="#特点2：单线程" class="headerlink" title="特点2：单线程"></a>特点2：单线程</h3><h3 id="特点3：ECMAScript标准"><a href="#特点3：ECMAScript标准" class="headerlink" title="特点3：ECMAScript标准"></a>特点3：ECMAScript标准</h3><p>ECMAScript是一种由 ECMA 国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定和发布的脚本语言规范。</p>
<p>JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。</p>
<p>简单来说，<strong>ECMAScript不是一门语言，而是一个标准</strong>。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。</p>
<p>ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不会那么快去追上这个标准，需要时间。</p>
<h2 id="编程语言的分类"><a href="#编程语言的分类" class="headerlink" title="编程语言的分类"></a>编程语言的分类</h2><h3 id="翻译器"><a href="#翻译器" class="headerlink" title="翻译器"></a>翻译器</h3><p>计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所编写的语言翻译成机器语言，计算机才能执行程序。<strong>程序语言翻译成机器语言的工具，被称为翻译器</strong>。</p>
<p>由此可见，所谓的“翻译”，指的是翻译成计算机能够执行的指令。</p>
<p>翻译器翻译的方式有两种：一种是<strong>编译</strong>，另一种是<strong>解释</strong>。两种方式之间的区别在于<strong>翻译的时机</strong>不同。</p>
<ul>
<li><p><strong>编译器</strong>：在代码执行之前，事前把所有的代码一次性翻译好，生成中间代码文件，然后整体执行。</p>
</li>
<li><p><strong>解释器</strong>：边翻译，边执行（在代码执行时进行及时翻译，并立即执行）。当编译器以解释的方式运行时，也称之为解释器。</p>
</li>
</ul>
<p>对应的语言，称之为“编译型语言”、“解释型语言”。</p>
<h3 id="编译型语言"><a href="#编译型语言" class="headerlink" title="编译型语言"></a>编译型语言</h3><ul>
<li><p>定义：事先把所有的代码一次性翻译好，然后整体执行。</p>
</li>
<li><p>优点：运行更快。</p>
</li>
<li><p>不足：移植性不好，不跨平台。</p>
</li>
<li><p>编译型语言举例：c、c++</p>
</li>
</ul>
<p>比如说，c语言的代码文件是<code>.c</code>后缀，翻译之后文件是<code>.obj</code>后缀，系统执行的是 obj 文件；再比如， java 语言的代码文件是<code>.java</code>后缀，翻译之后的文件是<code>.class</code>后缀。（注意，Java 语言不是严格的 编译型语言，这个一会儿会讲）</p>
<h3 id="解释型语言"><a href="#解释型语言" class="headerlink" title="解释型语言"></a>解释型语言</h3><ul>
<li><p>定义：<strong>边翻译边执行</strong>（翻译一行，执行一行），不需要事先一次性翻译。</p>
</li>
<li><p>优点：移植性好，跨平台。</p>
</li>
<li><p>缺点：运行更慢。</p>
</li>
<li><p>解释型语言举例：JavaScript、php、Python。</p>
</li>
</ul>
<h3 id="Java语言"><a href="#Java语言" class="headerlink" title="Java语言"></a>Java语言</h3><p>Java 语言既不是编译型语言，也不是解释型语言。翻译过程：</p>
<p>（1）编译：<code>.java</code>代码文件先通过 javac 命令编译成<code>.class</code>文件。</p>
<p>（2）执行：<code>.class</code>文件再通过 jvm 虚拟机，解释执行。有了 jvm 的存在，让 java 跨平台了。</p>
<h2 id="开始写第一行JavaScript代码"><a href="#开始写第一行JavaScript代码" class="headerlink" title="开始写第一行JavaScript代码"></a>开始写第一行JavaScript代码</h2><blockquote>
<p>JavaScript 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 js 代码，有哪几种方式。</p>
</blockquote>
<h3 id="方式1：行内式"><a href="#方式1：行内式" class="headerlink" title="方式1：行内式"></a>方式1：行内式</h3><p><strong>代码举例</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"button"</span> value=<span class="string">"点我点我"</span> onclick=<span class="string">"alert('千古壹号')"</span> /&gt;</span><br></pre></td></tr></table></figure>

<p>完整的可执行代码如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"点我点我"</span> <span class="attr">onclick</span>=<span class="string">"alert('千古壹号的方式1')"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>分析</strong>：</p>
<ul>
<li><p>可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），比如放在上面的 <code>onclick</code>点击事件中。</p>
</li>
<li><p>这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS代码时，容易出错；引号多层嵌套时，也容易出错。</p>
</li>
<li><p>关于代码中的「引号」，在HTML标签中，我们推荐使用双引号, JS 中我们推荐使用单引号。</p>
</li>
</ul>
<h3 id="方式2、内嵌式"><a href="#方式2、内嵌式" class="headerlink" title="方式2、内嵌式"></a>方式2、内嵌式</h3><p>我们可以在html 页面的 <code>&lt;body&gt;</code> 标签里放入<code>&lt;script type=”text/javascript”&gt;&lt;/script&gt;</code>标签对儿，并在<code>&lt;script&gt;</code>里书写JavaScript 代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">		<span class="comment">// 在这里写 js 代码</span></span></span><br><span class="line"><span class="actionscript">		alert(<span class="string">'千古壹号的方式2'</span>);</span></span><br><span class="line"><span class="javascript">		<span class="built_in">console</span>.log(<span class="string">'qianguyihao 方式2'</span>);</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>分析</strong>：</p>
<ul>
<li><p>text表示纯文本，因为JavaScript也是一个纯文本的语言。</p>
</li>
<li><p>可以将多行JS代码写到 <code>&lt;script&gt;</code> 标签中。</p>
</li>
<li><p>内嵌式 JS 是学习时常用的方式。</p>
</li>
</ul>
<h3 id="方式3：引入外部的-JS-文件"><a href="#方式3：引入外部的-JS-文件" class="headerlink" title="方式3：引入外部的 JS 文件"></a>方式3：引入外部的 JS 文件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="comment">&lt;!-- 引入外部的 js 文件 --&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"tool.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>上面这段代码，依然是放到body标签里，可以和内嵌的js代码并列。</p>
<p>另外，引用外部 JS文件的 script 标签中间不可以再写代码。</p>
<p><strong>总结</strong>：</p>
<p>我们在实战开发中，基本都是采用方式3，因为这种方式，可以确保 html 文件和 js 文件是分开的，有利于代码的结构化和复用。很少会有人把一大堆 js 代码塞到 html 文件里。</p>
<h2 id="JS一些简单的语法规则"><a href="#JS一些简单的语法规则" class="headerlink" title="JS一些简单的语法规则"></a>JS一些简单的语法规则</h2><p>学习程序，是有规律可循的，程序会有有相同的部分，这些部分就是一种规定，不能更改，我们成为：语法。</p>
<p>（1）JavaScript对换行、缩进、空格不敏感。每一条语句以分号结尾。</p>
<p>也就是说：</p>
<p>代码一：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">	alert(<span class="string">"今天蓝天白云"</span>);</span></span><br><span class="line"><span class="actionscript">	alert(<span class="string">"我很高兴"</span>);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>等价于代码二：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">	alert(<span class="string">"今天蓝天白云"</span>);alert(<span class="string">"我很高兴"</span>);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>备注：每一条语句末尾要加上分号，虽然分号不是必须加的，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。</p>
<p>（2）所有的符号，都是英语的。比如<strong>括号</strong>、引号、分号。</p>
<p>如果你用的是搜狗拼音，<strong>建议不要用shift切换中英文</strong>（可以在搜狗软件里进行设置），不然很容易输入中文的分号；建议用ctrl+space切换中英文输入法。</p>
<p>（3）严格区分大小写。</p>
<h2 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h2><p>我们不要把 HTML、CSS、JavaScript三者的注释格式搞混淆了。</p>
<h3 id="HTML-的注释"><a href="#HTML-的注释" class="headerlink" title="HTML 的注释"></a>HTML 的注释</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 我是注释  --&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="CSS的注释"><a href="#CSS的注释" class="headerlink" title="CSS的注释"></a>CSS的注释</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	/*</span><br><span class="line">		我是注释</span><br><span class="line">	*/</span><br><span class="line"></span><br><span class="line">	p&#123;</span><br><span class="line">		font-weight: bold;</span><br><span class="line">		font-style: italic;</span><br><span class="line">		color: red;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注意：CSS只有<code>/*  */</code>这种注释，没有<code>//</code>这种注释。而且注释要写在<code>&lt;style&gt;</code>标签里面才算生效哦。</p>
<h3 id="JavaScript-的注释"><a href="#JavaScript-的注释" class="headerlink" title="JavaScript 的注释"></a>JavaScript 的注释</h3><p>单行注释：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 我是注释</span><br></pre></td></tr></table></figure>

<p>多行注释：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;*</span><br><span class="line">	多行注释1</span><br><span class="line">	多行注释2</span><br><span class="line">*&#x2F;</span><br></pre></td></tr></table></figure>

<p>补充：VS Code中，单行注释的快捷键是「Ctrl + /」，多行注释的默认快捷键是「Alt + Shift + A」。</p>
<p>当然，如果你觉得多行注释的默认快捷键不方便，我们还可以修改默认快捷键。操作如下：</p>
<p>VS Code –&gt; 首选项 –&gt; 键盘快捷方式 –&gt; 查找“注释”这两个字 –&gt; 将原来的快捷键修改为「Ctrl + Shift + /」。</p>
<h2 id="Javascript-输入输出语句"><a href="#Javascript-输入输出语句" class="headerlink" title="Javascript 输入输出语句"></a>Javascript 输入输出语句</h2><h3 id="弹出警告框：alert语句"><a href="#弹出警告框：alert语句" class="headerlink" title="弹出警告框：alert语句"></a>弹出警告框：alert语句</h3><p>我们要学习的第一个语句，就是alert语句。</p>
<p>代码举例如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">            alert(<span class="string">'千古壹号'</span>);</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>alert</strong>（英文翻译为“警报”）的用途：<strong>弹出“警告框”</strong>。</p>
<p><code>alert(&quot;&quot;)</code>警告框的效果如下：</p>
<p><img src="http://img.smyhvae.com/20180116_1735.gif" alt></p>
<p>这个警告框，在IE浏览器中长这样：</p>
<p><img src="http://img.smyhvae.com/20180116_1906.png" alt></p>
<p>上面的代码中，如果写了两个alert()语句的话，网页的效果是：弹出第一个警告框，点击确定后，继续弹出第二个警告框。</p>
<h3 id="控制台输出：console-log-“”"><a href="#控制台输出：console-log-“”" class="headerlink" title="控制台输出：console.log(“”)"></a>控制台输出：console.log(“”)</h3><p><code>console.log(&quot;&quot;)</code>表示在控制台中输出。console表示“控制台”，log表示“输出”。</p>
<p>在Chrome浏览器中，按F12即可打开控制台，选择「console」栏，即可看到打印的内容。</p>
<p><code>console.log(&quot;&quot;)</code>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180116_2008.gif" alt></p>
<p>控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确。</p>
<p>普通人是不会在意控制台的，但是有些网站另藏玄机。有个很有意思的地方是，百度首页的控制台，悄悄地放了一段招聘信息：</p>
<p><img src="http://img.smyhvae.com/20180116_2010.png" alt></p>
<p>毕竟做前端的人是经常使用控制台的。</p>
<p><strong>总结</strong>：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己调试用的。</p>
<h3 id="弹出输入框：prompt-语句"><a href="#弹出输入框：prompt-语句" class="headerlink" title="弹出输入框：prompt()语句"></a>弹出输入框：prompt()语句</h3><p><code>prompt()</code>就是专门用来弹出能够让用户输入的对话框。用得少，测试的时候偶尔会用。</p>
<p>JS代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = prompt(<span class="string">"请随便输入点什么东西吧"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br></pre></td></tr></table></figure>

<p>上方代码中，用户输入的内容，将被传递到变量 a 里面，并在控制台打印出来。</p>
<p>效果如下：</p>
<p><img src="http://img.smyhvae.com/20180116_2230.gif" alt></p>
<p><strong>prompt()语句中，用户不管输入什么内容，都是字符串。</strong></p>
<p><strong>alert()和prompt()的区别：</strong></p>
<ul>
<li><p>alert() 可以直接使用。</p>
</li>
<li><p>prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。</p>
</li>
</ul>

    </div>

    
    
    
        <div class="reward-container">
  <div>坚持原创技术分享，您的支持将鼓励我继续分享！</div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.png" alt="Gip886 微信支付">
        <p>微信支付</p>
      </div>

  </div>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/07/07/06-HTML%E6%A0%87%E7%AD%BE%EF%BC%9A%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE/" rel="prev" title="06-HTML标签：图片标签">
      <i class="fa fa-chevron-left"></i> 06-HTML标签：图片标签
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/07/07/2020.7.7%E9%9A%8F%E7%AC%94%E8%AE%B0%E5%BD%95/" rel="next" title="2020.7.7随笔记录">
      2020.7.7随笔记录 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript背景"><span class="nav-number">1.</span> <span class="nav-text">JavaScript背景</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#发展历史"><span class="nav-number">1.1.</span> <span class="nav-text">发展历史</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript的发展：蒸蒸日上"><span class="nav-number">1.2.</span> <span class="nav-text">JavaScript的发展：蒸蒸日上</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript介绍"><span class="nav-number">2.</span> <span class="nav-text">JavaScript介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript入门易学性"><span class="nav-number">2.1.</span> <span class="nav-text">JavaScript入门易学性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript是前端语言"><span class="nav-number">2.2.</span> <span class="nav-text">JavaScript是前端语言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript的组成"><span class="nav-number">2.3.</span> <span class="nav-text">JavaScript的组成</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JavaScript-的特点"><span class="nav-number">3.</span> <span class="nav-text">JavaScript 的特点</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#特点1：解释型语言"><span class="nav-number">3.1.</span> <span class="nav-text">特点1：解释型语言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#特点2：单线程"><span class="nav-number">3.2.</span> <span class="nav-text">特点2：单线程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#特点3：ECMAScript标准"><span class="nav-number">3.3.</span> <span class="nav-text">特点3：ECMAScript标准</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#编程语言的分类"><span class="nav-number">4.</span> <span class="nav-text">编程语言的分类</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#翻译器"><span class="nav-number">4.1.</span> <span class="nav-text">翻译器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#编译型语言"><span class="nav-number">4.2.</span> <span class="nav-text">编译型语言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解释型语言"><span class="nav-number">4.3.</span> <span class="nav-text">解释型语言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Java语言"><span class="nav-number">4.4.</span> <span class="nav-text">Java语言</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#开始写第一行JavaScript代码"><span class="nav-number">5.</span> <span class="nav-text">开始写第一行JavaScript代码</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#方式1：行内式"><span class="nav-number">5.1.</span> <span class="nav-text">方式1：行内式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方式2、内嵌式"><span class="nav-number">5.2.</span> <span class="nav-text">方式2、内嵌式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方式3：引入外部的-JS-文件"><span class="nav-number">5.3.</span> <span class="nav-text">方式3：引入外部的 JS 文件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS一些简单的语法规则"><span class="nav-number">6.</span> <span class="nav-text">JS一些简单的语法规则</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#注释"><span class="nav-number">7.</span> <span class="nav-text">注释</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-的注释"><span class="nav-number">7.1.</span> <span class="nav-text">HTML 的注释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS的注释"><span class="nav-number">7.2.</span> <span class="nav-text">CSS的注释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-的注释"><span class="nav-number">7.3.</span> <span class="nav-text">JavaScript 的注释</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Javascript-输入输出语句"><span class="nav-number">8.</span> <span class="nav-text">Javascript 输入输出语句</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#弹出警告框：alert语句"><span class="nav-number">8.1.</span> <span class="nav-text">弹出警告框：alert语句</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#控制台输出：console-log-“”"><span class="nav-number">8.2.</span> <span class="nav-text">控制台输出：console.log(“”)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#弹出输入框：prompt-语句"><span class="nav-number">8.3.</span> <span class="nav-text">弹出输入框：prompt()语句</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Gip886"
      src="/images/%E5%A4%B4%E5%83%8F.jpg">
  <p class="site-author-name" itemprop="name">Gip886</p>
  <div class="site-description" itemprop="description">为了更美好的明天而战</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">29</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/Gip886" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;Gip886" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



      </div>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=86 src="//music.163.com/outchain/player?type=2&id=492390949&auto=1&height=66"></iframe>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Gip886</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">153k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">2:19</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script size="300" alpha="0.6" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false,"tagMode":false});</script></body>
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>
</html>

